<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
	<title>客服系统</title>
	<link rel="stylesheet" href="__TEMP__/{$style}/public/wxdist/style/weui.css">
	<link rel="stylesheet" href="__TEMP__/{$style}/public/wxdist/example/example.css">
	<style>
		* {
			margin: 0px;
			padding: 0px;
			font-size: 14px;
			color: #565656;
		}

		html, body {
			height: 100%;
		}

		.wrap {
			display: -webkit-box;
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			max-width: 500px;
			margin: auto auto;
			height: 100%;
			position: relative;
		}

		.header {
			width: 100%;
			height: 50px;
			text-align: center;
			line-height: 50px;
			border-bottom: 1px solid #cfcfcf;
			background: #333333;
		}

		.footer {
			padding: 5px;
			width: 100%;
			min-height: 45px;
			background: #fff;
			box-sizing: border-box;
		}

		.main {
			-webkit-box-flex: 1;
			-webkit-flex: 1;
			-ms-flex: 1;
			flex: 1;
			width: 100%;
			overflow: auto;
		}

		.lt {
			float: left;
		}

		.ft {
			float: right;
		}

		.cl {
			clear: both;
		}

		.tximg {
			width: 50px;
			height: 50px;
			overflow: hidden;
			border-radius: 50%;
			background: #237FE5;
		}

		.zbxx, .ybxx {
			display: flex;
			max-width: calc(100% - 70px);
		}

		.ybtx, .zbtx {
			margin: 0px 10px;
		}

		.tx {
			width: 50px;
			height: 50px;
		}

		.ltmsg, .ftmsg {
			width: 100%;
			height: auto;
			overflow: hidden;
			margin: 10px 0px;
		}

		.title-fh {
			width: 50px;
			line-height: 50px;
			text-align: center;
			position: absolute;
			top: 0px;
			left: 0px;
		}

		.msgtext {
			max-width: 100%;
			display: block;
			-webkit-box-orient: vertical;
			word-wrap: break-word;
			white-space: normal;
			word-break: break-all;
		}

		.weui-agree__text {
			height: 22px;
			line-height: 22px;
		}

		.nickname-text {
			max-width: 200px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			display: inline-block;
		}

		.tipmsg {
			max-width: 500px;
			text-align: center;
			margin: 5px 0px;
		}

		.tipmsg span {
			font-size: 12px !important;
		}

		.replytext {
			width: calc(100% - 80px);
			min-height: 22px;
			border: 1px solid #cfcfcf;
			outline: none;
			padding: 5px;

		}

		.msgtext_lt {
			background: #cfcfcf;
			padding: 10px;
			border: 1px solid #cfcfcf;
			border-radius: 2px 25px 25px 15px;
			flex: 2;
		}

		.msgtext_ft {
			background: #8ce25b;
			padding: 10px;
			border: 1px solid #cfcfcf;
			border-radius: 25px 2px 15px 25px;
			flex: 2;
		}

		.title, .title-fh {
			color: #fff !important;
		}

		.errortip {
			color: red;
			display: inline-block;
			line-height: 22px;
			height: 22px;
			margin-right: 10px;
		}

		.tipimg {
			width: 14px;
			height: 14px;
			vertical-align: middle;
			margin-bottom: 4px;
		}
		.flex_container{
			flex: 2;
		}
	</style>
</head>
<body>
<div class="wrap">
	<div class="header">
		<div class="weui-agree__text title" style="height: 50px;line-height: 50px"><span class="title-fh" id="close_page"> < </span>
			{$user_nickname}
		</div>
	</div>
	<div class="main">
		{if is_array($list) }
		{foreach $list as $key=>$vo}
		<div class="ltmsg cl">
			<div class="lt zbxx">
				<div class="lt zbtx">
					<div class="tximg"><img src="{$vo.headimgurl}" class="tx"></div>
				</div>
				<div class="lt flex_container">
					<span class="cl"></span>
					<!--<p class="weui-agree__text "><span class="nickname-text">{$vo.nickname}</span></p>-->
					<p class="weui-agree__text "><span class="nickname-text" style="font-size: 12px">{$vo.create_time|date="m-d H:i:s",###}</span>
					</p>
					<div class="msgtext_lt lt">
						<span class="msgtext"><?php echo trim($vo['content']);?></span>
					</div>
				</div>
			</div>
		</div>
		{if isset($vo['child']) && is_array($vo['child'])}
		{foreach $vo['child'] as $k=>$v}
		<div class="ftmsg cl">
			<div class="ft ybxx">
				<div class="ft flex_container">
					<span class="cl"></span>
					<p class="weui-agree__text " style="text-align: right"><span class="nickname-text"
																				 style="font-size: 12px">{$v['nickname']}</span>
					</p>
					<p class="weui-agree__text " style="text-align: right;font-size: 12px"><span class="nickname-text" style="font-size: 12px">{$v.replay_time|date="m-d H:i:s",###}</span>
					</p>
					<div class="msgtext_ft ft">
						<span class="msgtext">{$v['reply_content']}</span>
					</div>
				</div>
				<div class="ft ybtx">
					<div class="tximg"><img src="__PUBLIC__/static/images/default_user_portrait.gif" class="tx"></div>
				</div>
			</div>
		</div>
		{/foreach}
		{/if}
		<?php $newmsgid = $vo['msg_id'];?>
		{/foreach}
		{else}
		<div class="tipmsg"><span class="weui-agree__text">暂无聊天记录</span></div>
		{/if}
		<!--<div class="tipmsg" id="getnewmsg"><span class="weui-agree__text">获取最新消息</span></div>-->
		<!--<div class="ltmsg cl">
			<div class="lt zbxx">
				<div class="lt zbtx">
					<div class="tximg"><img src="" class="tx"></div>
				</div>
				<div>
					<p class="weui-agree__text nickname-text">我是卖猪滴我是卖猪滴我是卖猪滴我是卖猪滴我是卖猪滴我是卖猪滴</p>
					<p class="weui-agree__text nickname-text" style="font-size: 12px">2018-09-07 16:09:26</p>
					<div class="msgtext msgtext_lt">
						哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽
					</div>
				</div>
			</div>
		</div>
		&lt;!&ndash;<div class="tipmsg"><span class="weui-agree__text" >2018-09-07 16:09:26</span></div>&ndash;&gt;
		<div class="ftmsg cl">
			<div class="ft ybxx">
				<div class="ft ybtx">
					<div class="tximg"><img src="" class="tx"></div>
				</div>
				<div>
					<p class="weui-agree__text nickname-text" style="text-align: right">我是卖猪滴我是卖猪滴我是卖猪滴我是卖猪滴我是卖猪滴我是卖猪滴</p>
					<p class="weui-agree__text nickname-text" style="text-align: right;font-size: 12px">2018-09-07 16:09:26</p>
					<div class="msgtext msgtext_ft">
						哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽
					</div>
				</div>
			</div>
		</div>-->
		<!--<div class="ftmsg cl">
			<div class="ft ybxx">
				<div class="ft">
					<span class="cl"></span>
					<p class="weui-agree__text " style="text-align: right"><span class="nickname-text" style="font-size: 12px">我是卖猪滴我是卖猪滴我是卖猪滴我是卖猪滴我是卖猪滴我是卖猪滴</span></p>
					<p class="weui-agree__text " style="text-align: right;font-size: 12px"><span class="nickname-text" style="font-size: 12px">2018-09-07 16:09:26</span></p>
					<div class="msgtext_ft ft">
						<span class="msgtext">哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽</span>
					</div>
				</div>
				<div class="ft ybtx">
					<div class="tximg"><img src="" class="tx"></div>
				</div>
			</div>
		</div>-->
	</div>
	<div class="cl footer">
		<div contenteditable="true" class="lt replytext" id="replytext"></div>
		<div class="ft">
			<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary" id="sendMsg"
			   style="line-height: 33px !important;position: absolute;bottom: 7px;right: 7px">
				发送
			</a>
		</div>
	</div>
</div>
<input type="hidden" value="{$newmsgid}" id="newmsg_id">
<input type="hidden" value="{$user_nickname}" id="username">
<input type="hidden" value="{$admin_name}" id="adminuser">
<input type="hidden" value="{$user_openid}" id="user_openid">

<script src="__TEMP__/{$style}/public/wxdist/example/zepto.min.js"></script>
<!--<script src="__TEMP__/{$style}/public/js/jquery-2.1.0.min.js"></script>-->
<!--<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>-->
<script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
<script>
	$(document).ready(function () {
		$(".main").scrollTop($(".main")[0].scrollHeight);

		$("#replytext").keydown(function (e) {
			if (e.ctrlKey && e.keyCode == 13) {
				$("#sendMsg").click();
			}
		});

		// $("#getnewmsg").click(function () {
		// 	lunxun();
		// })
		//重复执行某个方法
		var t1 = window.setInterval(lunxun, 2000);
		// 去掉定时器的方法
		// window.clearInterval(t1);

		$("#close_page").click(function () {
			if (confirm("您确定要关闭本页吗？")) {
				var userAgent = navigator.userAgent;
				if (userAgent.indexOf("Firefox") != -1 || userAgent.indexOf("Presto") != -1) {
					window.location.replace("about:blank");
				} else {
					window.opener = null;
					window.open("", "_self");
					window.close();
				}
			}
			return false;
		})

		var t1;
		$("#sendMsg").click(function () {
			var replytext = $('#replytext').text();
			// 发送消息对应的哪一句
			var newmsg_id = $('#newmsg_id').val();
			var openid = $('#user_openid').val();
			if (replytext == '') {

				$('.tipmsg').remove();
				window.clearTimeout(t1);//去掉定时器
				var msgtip = '<div class="tipmsg" class="tipmsg"><span class="weui-agree__text">不能发送空白的消息</span></div>';
				var msgtipclose = $(".main").append(msgtip);
				t1 = window.setTimeout(function () {
					$('.tipmsg').remove();
				}, 2000);

				$(".main").scrollTop($(".main")[0].scrollHeight);
				return false;
			}

			var html = '<div class="ftmsg cl"><div class="ft ybxx"><div class="ft flex_container"><span class="cl"></span><p class="weui-agree__text " style="text-align: right"><span class="errortip nickname-text">发送中...</span>' +
				'<span class="nickname-text" style="font-size: 12px">' + $("#adminuser").val() + '</span></p>' +
				'<p class="weui-agree__text " style="text-align: right;font-size: 12px"><span class="nickname-text" style="font-size: 12px">' + getNowFormatDate('') + '</span></p>' +
				'<div class="msgtext_ft ft"><span class="msgtext" data-msg-id="' + newmsg_id + '">' + replytext + '</span></div>' +
				'</div><div class="ft ybtx"><div class="tximg"><img src="__PUBLIC__/static/images/default_user_portrait.gif" class="tx"></div></div></div></div>';
			var htmlobj = $(".main").append(html);
			$('#replytext').text("");
			$(".main").scrollTop($(".main")[0].scrollHeight);

			$.ajax({
				type: "post",
				url: "{:__URL('ADMIN_MAIN/wchat/replyFansSend')}",
				data: {
					"replytext": replytext,
					"msgid": newmsg_id,
					"openid": openid
				},
				success: function (data) {
					var tip = '';
					if (data.code == 2) {
						tip = '<img src="__PUBLIC__/static/images/senderror.png" class="tipimg">';
					}
					$(htmlobj).find('.errortip').html(tip)
				}
			})
		})

		$(".main").on('click', '.errortip', function () {
			var replytext = $(this).parents(".ybxx").find('.msgtext').text();
			var openid = $('#user_openid').val();
			var newmsg_id = $(this).parents(".ybxx").find('.msgtext').attr("data-msg-id");
			var e = $(this);
			e.html('发送中...');
			$.ajax({
				type: "post",
				url: "{:__URL('ADMIN_MAIN/wchat/replyFansSend')}",
				data: {
					"replytext": replytext,
					"msgid": newmsg_id,
					"openid": openid,
				},
				success: function (data) {
					var tip = '';
					if (data.code == 2) {
						tip = '<img src="__PUBLIC__/static/images/senderror.png" class="tipimg">';
					}
					e.html(tip);
				}
			})
		})
	})
	;

	function getNowFormatDate(timeStamp) {
		var date = new Date();
		if (timeStamp != '') {
			date.setTime(timeStamp * 1000);
		}

		var seperator1 = "-";
		var seperator2 = ":";
		var month = date.getMonth() + 1;
		var day = date.getDate();
		var Hours = date.getHours();
		var Minutes = date.getMinutes();
		var Seconds = date.getSeconds();
		month = month < 10 ? ('0' + month) : month;
		day = day < 10 ? ('0' + day) : day;
		Hours = Hours < 10 ? ('0' + Hours) : Hours;
		Minutes = Minutes < 10 ? ('0' + Minutes) : Minutes;
		Seconds = Seconds < 10 ? ('0' + Seconds) : Seconds;
		return month + seperator1 + day + " " + Hours + seperator2 + Minutes + seperator2 + Seconds;
	}

	function lunxun() {
		var newmsg_id = $('#newmsg_id').val();
		var openid = $('#user_openid').val();
		$.ajax({
			type: "get",
			url: "{:__URL('ADMIN_MAIN/wchat/getReplyFansSend')}",
			data: {
				"msgid": newmsg_id,
				"openid": openid,
			},
			success: function (data) {
				if (data.code == 1) {
					var arr = data.data;
					var msg_id = '';
					var html = '';
					for (var i in arr) {
						html += '<div class="ltmsg cl"> <div class="lt zbxx"> <div class="lt zbtx">' +
							'<div class="tximg"><img src="' + arr[i]['headimgurl'] + '" class="tx"></div></div><div class="lt flex_container"><span class="cl"></span>' +
							'<p class="weui-agree__text "><span class="nickname-text" style="font-size: 12px">' + getNowFormatDate(arr[i]['create_time']) + '</span></p><div class="msgtext_lt lt"><span class="msgtext">' + arr[i]['content'] + '</span></div></div></div></div>';
						msg_id = arr[i]['msg_id']
					}
					$(".main").append(html);
					$(".main").scrollTop($(".main")[0].scrollHeight);
					$('#newmsg_id').val(msg_id);
				}
			}
		})
	}

</script>
</body>
</html>